<template>
    <section>
        <!--列表-->
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">银行奖金配置</span></strong>
            </div>
            <div class="body-content">
                <!-- 查询条件 -->
                <el-form :inline="true" size='small'>
                    <el-form-item>
                        <el-select v-model="bankName" size='small' @change="selectChange" placeholder="选择银行" style="width: 130px">
                            <el-option value="" label="全部银行"/>
                            <el-option v-for="item in banksData" :key="item.autoId" :label="item.bankName" :value="item.bankName"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addDailog" size='small'>新增</el-button>
                    </el-form-item>
                </el-form>

                <!-- 数据表格 -->
                <el-table :data="tableData" border v-loading="listLoading" element-loading-text="拼命加载中">
                    <el-table-column label="银行名称" width="160">
                        <template slot-scope="scope">
                            <el-popover trigger="click" placement="top">
                                <span>autoId: {{ scope.row.autoId }}</span>
                                <div slot="reference">
                                    {{scope.row.bankName}}
                                </div>
                            </el-popover>
                        </template>                    
                    </el-table-column>
                    <el-table-column label="图片链接" width="150">
                        <template slot-scope="scope">
                            <img :src="scope.row.imageUrl" alt="图标" style="width: 50px;height: 50px;margin: 0 auto;"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bonusAmount" label="发放佣金总额" width="150"/>
                    <el-table-column prop="bankBonus" label="银行实际佣金" width="150"/>
                    <el-table-column prop="descriptionInfo" label="描述"/>
                    <el-table-column prop="apiSupport" label="是否API合作银行"/>
                    <el-table-column prop="channelCode" label="渠道码"/>
                    <!-- <el-table-column prop="serviceLink" label="办卡链接">
                </el-table-column> -->
                    <!-- <el-table-column prop="cornerMark" label="角标" width="70">
                </el-table-column> -->
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <span class="tableBtn" @click="editDailog(scope.row)">编辑</span>
                            <span> | </span>
                            <span class="tableBtn" @click="channelDailog(scope.row)">渠道码</span>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 弹窗 -->
                <el-dialog :title="dialogTitle" :close-on-click-modal='closeOnClickModal' :visible.sync="dialogFormVisible" width="40%" @close="closeDailog" @open="openDailog">
                    <el-form>
                        <el-form-item label="银行名称" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.bankName" style="width:200px;" size="small"/>
                        </el-form-item>
                        <el-form-item label="银行代码" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.bankCode" style="width:200px;" size="small"/>
                        </el-form-item>
                        <!-- <el-form-item label="办卡链接" :label-width="formLabelWidth">
                        <el-input v-model="dailogFrom.serviceLink" style="width:200px;" size="small"></el-input>
                    </el-form-item> -->
                        <el-form-item label="图片URL" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.imageUrl" style="width:200px;" size="small"/>
                        </el-form-item>
                        <el-form-item label="发放佣金总额" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.bonusAmount" style="width:200px;" size="small"/>
                        </el-form-item>
                        <el-form-item label="银行实际佣金" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.bankBonus" style="width:200px;" size="small"/>
                        </el-form-item>
                        <el-form-item label="描述" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.descriptionInfo" style="width:200px;" size="small"/>
                        </el-form-item>
                        <el-form-item label="是否API合作银行" :label-width="formLabelWidth">
                            <el-radio-group
                                v-model="dailogFrom.api">
                                <el-radio 
                                    v-for="item in apiSupportSelect"
                                    :key="item.label"
                                    :label="item.value">{{item.label}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="渠道码" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.channelCode" style="width:200px;" size="small"/>
                        </el-form-item>
                    <!-- <el-form-item label="角标" :maxlength='2' :label-width="formLabelWidth">
                        <el-input v-model="dailogFrom.cornerMark" style="width:200px;" size="small"></el-input>
                    </el-form-item> -->
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
                <el-dialog :title="`编辑渠道码(${channelDailogBankname})`" :close-on-click-modal='closeOnClickModal' :visible.sync="dialogchannel" width="40%" @close="dialogChahnelClose">
                    <el-table :data="channelData" border v-loading="channelListLoading" element-loading-text="拼命加载中" max-height="300">
                        <el-table-column label="序号" width="110">
                            <template slot-scope="scope">
                                <el-popover trigger="click" placement="top">
                                    <span>autoId: {{ scope.row.autoId }}</span>
                                    <div slot="reference">
                                        {{scope.$index+1}}
                                    </div>
                                </el-popover>
                            </template> 
                        </el-table-column>
                        <!-- <el-table-column prop="channelCode" label="银行名称"/> -->
                        <el-table-column prop="channelCode" label="渠道码"/>
                        <el-table-column label="操作" width="120">
                            <template slot-scope="scope">
                                <span 
                                    v-show="scope.row.status == 1" 
                                    class="tableBtn" 
                                    @click="scope.$index != 0 && deleteChannel(scope.row)"
                                >{{ scope.$index == 0 ? '当前使用' : '删除'}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" type="primary" @click="dialogchannel = false">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </section>
</template>

<script>
import * as api from "../../api/api";

export default {
    data() {
        return {
            closeOnClickModal: false,
            banksData: [], // 银行名称列表

            bankName: "", // 银行名称
            tableData: [], // 数据列表
            listLoading: false,

            dialogchannel: false, // 渠道码弹窗
            channelData: [],
            channelDailogBankname: "", // 渠道吗弹窗 银行名称
            channelListLoading: false,

            dialogTitle: "", // 弹窗标题
            dialogType: "", // 弹窗类型
            dialogFormVisible: false,
            formLabelWidth: "180px",
            dailogFrom: {
                bankName: "", // 银行名称
                bankCode: "", // 银行代码
                // serviceLink: '', // 办卡链接
                imageUrl: "", // 图片URL
                bonusAmount: "", // 发放佣金总额
                descriptionInfo: "", // 描述
                bankBonus: "", // 银行实际佣金
                cornerMark: "", // 角标
                api: 0, // 是否是api接入
                channelCode: "" // 渠道码
            },
            apiSupportSelect: [
                {
                    value: 1,
                    label: "是"
                },
                {
                    value: 0,
                    label: "否"
                }
            ]
        };
    },
    methods: {
        // 编辑弹窗
        editDailog(rowData) {
            this.dialogType = "edit";
            for (const key in rowData) {
                this.dailogFrom[key] = rowData[key];
            }
            this.dialogFormVisible = true;
        },
        // 打开渠道码弹窗
        channelDailog(row) {
            this.dialogchannel = true;
            this.channelDailogBankname = row.bankName;
            // 查询渠道列表
            this.bankChannelCodeList(row.autoId);
        },
        // 查询渠道列表
        bankChannelCodeList(autoId) {
            this.channelListLoading = true;
            return api
                .bankChannelCodeList({
                    autoId: autoId
                })
                .then(res => {
                    this.channelData = res.data;
                })
                .finally(() => {
                    this.channelListLoading = false;
                });
        },
        // 关闭渠道码弹窗
        dialogChahnelClose() {
            this.channelData = [];
            this.channelDailogBankname = "";
        },
        // 删除银行渠道码
        deleteChannel(row) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    api.deleteBankChannelCode({
                        autoId: row.bankId,
                        channelCode: row.channelCode
                    }).then(() => {
                        this.$message.success("删除成功!");
                        this.bankChannelCodeList(row.bankId);
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        // 新增弹窗
        addDailog() {
            this.dialogType = "add";
            this.dailogFrom.api = 0;
            this.dialogFormVisible = true;
        },
        // 关闭弹窗
        closeDailog() {
            const resetFormData = {
                bankName: "", // 银行名称
                bankCode: "", // 银行代码
                // serviceLink: '', // 办卡链接
                imageUrl: "", // 图片URL
                bonusAmount: "", // 发放佣金总额
                descriptionInfo: "", // 描述
                bankBonus: "", // 银行实际佣金
                cornerMark: "", // 角标
                channelCode: "" // 渠道码
            };
            this.dailogFrom = { ...this.dailogFrom, ...resetFormData };
        },
        // 打开弹窗
        openDailog() {
            this.dialogType === "add"
                ? (this.dialogTitle = "新增")
                : (this.dialogTitle = "编辑");
        },
        // 新增/编辑 确定
        confirm() {
            if (!this.dailogFrom.bankName) {
                this.$message.error("请输入银行名称!");
                return false;
            }
            if (!this.dailogFrom.bankCode) {
                this.$message.error("请输入银行代码!");
                return false;
            }
            // if (!this.dailogFrom.serviceLink) {
            //     this.$message.error("请输入办卡链接!");
            //     return false;
            // }
            if (!this.dailogFrom.imageUrl) {
                this.$message.error("请输入图片URL!");
                return false;
            }
            if (
                !this.dailogFrom.bonusAmount ||
                isNaN(this.dailogFrom.bonusAmount)
            ) {
                this.$message.error("请输入正确发放佣金总额!");
                return false;
            }
            if (
                !this.dailogFrom.bankBonus ||
                isNaN(this.dailogFrom.bankBonus)
            ) {
                this.$message.error("请输入正确银行实际佣金!");
                return false;
            }
            if (
                Number(this.dailogFrom.bonusAmount) >
                Number(this.dailogFrom.bankBonus)
            ) {
                this.$message.error("发放佣金总额不能大于银行实际佣金!");
                return false;
            }
            // if (!this.dailogFrom.descriptionInfo) {
            //     this.$message.error("请输入描述!");
            //     return false;
            // }
            // if (!this.dailogFrom.cornerMark) {
            //     this.$message.error("请输入角标!");
            //     return false;
            // }

            if (this.dialogType === "add") {
                this.addBankInfoFun();
            } else if (this.dialogType === "edit") {
                this.updateBankInfoFun();
            }
        },
        // 下拉框选择事件
        selectChange() {
            // 获取银行信息列表
            this.getbankInfoList();
        },
        // 获取银行信息列表
        getbankInfoList() {
            this.listLoading = true;
            api.bankInfoList({
                bankName: this.bankName
            }).then(res => {
                this.listLoading = false;
                this.tableData = res.data.map(item => {
                    if (item.api === 1) {
                        item.apiSupport = "是";
                    } else {
                        item.apiSupport = "否";
                    }
                    return item;
                });
            });
        },
        // 获取银行名称列表
        getBankNameList() {
            api.bankNameList().then(res => {
                this.banksData = res.data;
                // 获取银行信息列表
                this.getbankInfoList();
            });
        },
        // 添加银行信息
        addBankInfoFun() {
            api.addBankInfo(this.dailogFrom).then(res => {
                this.$message.success("新增成功!");
                // 获取银行信息列表
                this.getbankInfoList();
                this.dialogFormVisible = false;
            });
        },
        // 更新银行信息
        updateBankInfoFun() {
            api.updateBankInfo(this.dailogFrom).then(res => {
                this.$message.success("更新成功!");
                // 获取银行信息列表
                this.getbankInfoList();
                this.dialogFormVisible = false;
            });
        }
    },
    mounted() {
        // 获取银行名称列表
        this.getBankNameList();
    }
};
</script>

<style>
</style>
